<template>
  <UiCard>
    <UiCardHeader>
      <span class="mb-2 text-xs text-gray-400">学习进度</span>
      <n-progress :show-indicator="false" :percentage="item.progress" type="line" />
    </UiCardHeader>

    <UiCardBody class="flex">
      <n-tag v-if="route.query.tab !== 'column'" size="small">{{ t[item.type] }}</n-tag>
      <span class="ml-3">{{ item.title }}</span>
      <n-button type="primary" size="tiny" class="ml-auto" @click="open"
        >继续观看</n-button
      >
    </UiCardBody>
  </UiCard>
</template>

<script setup>
// 引入 naive-ui 组件
import { NProgress, NButton, NTag } from "naive-ui";

// 引入路由
const route = useRoute();

// 引用声明
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

// 类型
const t = {
  audio: "音频",
  video: "视频",
  media: "图文",
  column: "专栏",
  book: "电子书",
  course: "课堂",
};

// 继续观看事件打开
const open = () => {
  navigateTo(`/detail/${route.query.tab}/${props.item.id}`);
};
</script>
